<!-- 资产装置列表信息 -->
<template>
  <div class="q-pa-md bg-white" style="max-width:700px">
    <div class="cursor-pointer row">
      <span class="text-body1 q-pl-sm">资产信息</span>
      <q-space></q-space>
      <q-icon name="mdi-close" @click="closeDialog"></q-icon>
    </div>
    <q-table
      flat
      separator="none"
      :rows="dataList"
      :columns="columns"
      no-data-label="暂无数据"
      no-results-label="过滤器没有发现任何结果"
      row-key="name"
      :visible-columns="visibleColumns"
      v-model:pagination="pagination"
      hide-pagination
      :loading="loading"
    >
      <!-- 表格的加载状态 -->
        <template v-slot:loading>
          <q-inner-loading showing color="grey" />
        </template>
      <!-- 表格顶部 -->
      <template v-slot:top>
        <div style="width: 230px" class="q-mt-xs q-mr-sm" >
          <q-select dense options-dense outlined v-model="headerSeach" :options="deviceNameOptions" />
        </div>
        <div v-show="headerSeach" style="width: 200px" class="q-mr-sm q-mt-xs">
          <q-input  outlined v-model="queryList[seachContent[headerSeach]]" dense />
        </div>
        <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated icon="search" padding="8px 8px 7px" color="primary" label="搜索" @click="handlerSearch" />
        <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated color="primary" padding="8px 8px 7px" label="复位搜索" @click="handleResetSearch" />
        <q-space />
        <q-select
          v-model="visibleColumns"
          multiple
          outlined
          dense
          options-dense
          :display-value="'表头选择'"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          options-cover
          style="min-width: 150px"
          class="q-mt-xs q-mr-sm"
        />
      </template>
      <!-- 无数据提示信息 -->
      <template v-slot:no-data="{ message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <span>
            {{ message }}
          </span>
        </div>
      </template>
      <!-- 表格头部 -->
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th></q-th>
          <q-th
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.label }}
            <q-icon v-if="col.isSort" class="cursor-pointer" size="18px" :name="pagination.descending?'expand_less':'expand_more'" @click="handlerSort"></q-icon>
          </q-th>
        </q-tr>
      </template>
      <!-- 表格主体 -->
      <template v-slot:body="props">
        <q-tr :props="props" >
          <q-td>
            <q-checkbox
              dense
              :val="props.row"
              v-model="selected"
              @update:model-value="selectedEvent"
            />
          </q-td>
          <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>
        </q-tr>
      </template>
    </q-table>
    <!-- 分页 -->
    <Pagination
      :pagination="pagination"
      :pageSizes="['5条/页','10条/页','20条/页','30条/页']"
      @updatePage="updatePage"
      @updateSizes="updateSizes"
      @handlerRefresh="handlerRefresh"
    />

  </div>
</template>

<script>
import { ref } from 'vue'
import { getOranizerList } from 'src/api/asset'
import Pagination from 'src/components/pagination'
import getNowFormatDate from "src/utils/get-now-format-date"

export default {
  data () {
    return {
      dataList: [],
      columns: [
        { name: 'idNum', required: true, label: 'ID', align: 'center',field: 'idNum', isSort: true},
        { name: 'assets_sn', label: '资产编码', align: 'center', field: 'assets_sn',  },
        { name: 'name', label: '名称', align: 'center', field: 'name',  },
        { name: 'type_id', label: '类型', align: 'center', field: 'type_id', },
        { name: 'model', label: '型号', align: 'center', field: 'model', },
        { name: 'sn', label: '序列号', align: 'center', field: 'sn', },
        { name: 'vendor', label: '制造商', align: 'center', field: 'vendor', },
        { name: 'img', label: '图片', align: 'center', field: 'img', },
        { name: 'purchase_date', label: '入厂日期', align: 'center', field: 'purchase_date'},
        { name: 'create_time', label: '创建日期', align: 'center', field: 'create_time' },
        { name: 'manufacture_date', label: '出厂日期', align: 'center', field: 'manufacture_date', },
        { name: 'first_use_date', label: '首次启用日期', align: 'center', field: 'first_use_date' },
        { name: 'modify_time', label: '更新日期', align: 'center', field: 'modify_time', },
        { name: 'location', label: '安放位置', align: 'center', field: 'location', },
        { name: 'main_motor_power', label: '主电机功率', align: 'center', field: 'main_motor_power', },
        { name: 'production_speed_min', label: '最小生产速率', align: 'center', field: 'production_speed_min', },
        { name: 'production_speed_max', label: '最大生产速率', align: 'center', field: 'production_speed_max', },
      ],

      // 表格头部
      headerSeach: ref(),
      deviceNameOptions: ['', '资产编码', '名称', '类型', '型号', '序列号', '制造商', '安放位置', '主电机功率', '最小生产速率', '最大生产速率'],
       // 右侧表头选择
      visibleColumns: ref([]),
      pagination: { // 分页
          sortBy: 'desc', // 列名
          descending: false, // 是否按照降序排序
          page: 1, // 页码（当前显示第几页的数据）
          rowsPerPage: 5, // 每页多少行
          rowsNumber: 10 // 共多少条
      },
      queryList: {
        page: 1,
        page_size: 5,
        ordering: 'id'
      },
      loading: false,
      seachContent: {
        '资产编码': 'assets_sn',
        '名称': 'name',
        '类型': 'type_id',
        '型号': 'model',
        '序列号': 'sn',
        '制造商': 'vendor',
        '安放位置': 'location',
        '主电机功率': 'main_motor_power',
        '最小生产速率': 'production_speed_min',
        '最大生产速率': 'production_speed_max',
      },
      selected: []
    }
  },

  components: {
    Pagination
  },

  computed: {},
  watch: {
  },
  beforeCreate() {
  },
  mounted() {
    this.feathOranizerList()
    this.handleSelect()
  },

  methods: {
    // 刷新
    handlerRefresh() {
      this.handleResetSearch()
    },
    /**
     * 搜索
     */
    handlerSearch() {
      this.feathOranizerList()
    },
    /**
     * 复位搜索
     */
    handleResetSearch() {
      this.pagination = {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 5
      }
      this.queryList = {
        page: 1,
        page_size: 5,
        ordering: 'id'
      }
      this.headerSeach = ''
      this.feathOranizerList()
    },
    /**
     * 排序
     */
    handlerSort() {
      this.pagination.descending = !this.pagination.descending
      this.feathOranizerList()
    },
    /**
     * 获取资产信息的列表
     */
    feathOranizerList() {
      this.loading = true
      this.queryList.page = this.pagination.page
      this.queryList.page_size = this.pagination.rowsPerPage
      this.queryList.ordering = this.pagination.descending?'-id':'id'
      getOranizerList(this.queryList).then(res => {
        if (res.status == 200) {
          this.pagination.rowsNumber = res.totalCounts;
          this.dataList = [];
          this.loading = false;
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              id: res.data[i].id,
              idNum: i + 1,
              name: res.data[i].name,
              assets_sn: res.data[i].assets_sn,
              electronic_code: res.data[i].electronic_code,
              sn: res.data[i].sn,
              model: res.data[i].model,
              vendor: res.data[i].vendor,
              location: res.data[i].location,
              img: res.data[i].img,
              manufacture_date: getNowFormatDate(new Date(res.data[i].manufacture_date)).substr(0, 16),
              purchase_date: getNowFormatDate(new Date(res.data[i].purchase_date)).substr(0, 16),
              first_use_date: getNowFormatDate(new Date(res.data[i].first_use_date)).substr(0, 16),
              main_motor_power: res.data[i].main_motor_power,
              production_speed_min: res.data[i].production_speed_min,
              production_speed_max: res.data[i].production_speed_max,
              type_id: res.data[i].type_name,
              type_name: res.data[i].type_id,
              owner_id: res.data[i].create_name,
              create_time: getNowFormatDate(new Date(res.data[i].create_time)).substr(0, 16),
              modify_time: getNowFormatDate(new Date(res.data[i].modify_time)).substr(0, 16),
            }
            this.dataList.push(obj)
          }
        }
      }).catch(_ => {
        this.loading = false
      })
    },
    /**
     * 处理数据
     */
    handleSelect() {
      this.visibleColumns = []
      this.columns.forEach((item, index) => {
        if (index < 6) {
          this.visibleColumns.push(item.name)
        }
      })
    },
     /**
     * 选择事件
     */
    selectedEvent(val) {
      if (val.length === 1) {
        this.$emit('selectedEvent', val)
        return
      }
      if (val && val.length > 1) {
        this.selected = val.slice(val.length-1, val.length)
        this.$emit('selectedEvent', this.selected)
      }
    },
    /**
     * 关闭对话框
     */
    closeDialog() {
      this.$emit('closeDialog', false)
    },
    // 切换当前页数
    updatePage(val) {
      if (!val) return
      this.pagination.page = val*1
      this.feathOranizerList()
    },
    // 切换每页的行数
    updateSizes(val) {
      this.pagination.rowsPerPage = parseFloat(val)
      this.feathOranizerList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
